<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <title>Amind Client 示例</title>
    <meta name="description" content="amind接口访问示例">
    <meta name="keywords" content="amind">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="icon" type="image/png" href="assets/favicon.ico">
    <link rel="stylesheet" href="assets/css/app.css">
    <!-- 引用JQuery框架 -->
    <script src="assets/js/jquery.min.js"></script>
    <!-- 引用amind client组件接口 -->
    <script src="https://www.anygraphanywhere.com/test_web/automap/dist/amind.client.js"></script>
    <!-- <script src="/graph/automap/js.src/amind.client.js"></script> -->
</head>

<body>
    <div class="example-main">
        <!-- sidebar start -->
        <div class="example-sidebar">
            <header class="example-header">
                <div class="example-header-brand">
                    <strong><a href="https://www.anygraphanywhere.com">图形天下思维导图</a></strong>
                    <small>AMind Client Examples</small>
                </div>
            </header>
            <ul class="example-sidebar-list" id="fun-list">
                <li><span>数据操作</span></li>
                <li><span>导入导出</span></li>
                <li><span>主题操作</span></li>
                <li><span>图形布局</span></li>
                <li><span>风格样式</span></li>
                <li><span>界面控制</span></li>
                <li><span>子图</span></li>
            </ul>
        </div>
        <!-- sidebar end -->
        <!-- main start -->
        <div class="example-content">
            <div class="toolbar" id="toolbar">
                <div class="part1"></div>
                <div class="part2"></div>
            </div>
            <div class="am-main">
                <div class="am-form-left">
                    <label>数据</label>
                    <textarea id="txtContent" placeholder="数据"></textarea>
                    <label>结果</label>
                    <textarea id="txtResult" placeholder="执行结果"></textarea>
                </div>
                <div class="am-form-right">
                    <div id="container" class="mindmap">
                    </div>
                </div>
            </div>
        </div>
        <!-- main end -->
    </div>
</body>
<!-- 引用示例数据 -->
<script src="assets/js/examples-data.js"></script>

<!-- 引用amind接口调用examples -->
<script src="assets/js/examples-app.js"></script>

<script>

    $(document.body).ready(function () {
        init();

        // 功能导航click事件
        $("#fun-list li").on("click", function () {
            $("#toolbar").find(".part1").html("");
            $("#toolbar").find(".part2").html("");
            $("#fun-list li").removeClass("active");
            $(this).addClass("active");
            let text = $(this).text();
            $("#txtTitle").html(text);

            if (text == "导入导出") {
                $("#txtContent").html(md_examples1);
                $("#toolbar").find(".part1").append(`<button type="button" class="ag-button">md示例</button>`);
                $("#toolbar").find(".part1").append(`<button type="button" class="ag-button">txt示例</button>`);
                $("#toolbar").find(".part1").append(`<button type="button" class="ag-button">json示例1</button>`);
                $("#toolbar").find(".part1").append(`<button type="button" class="ag-button">清除</button>`);
                let wrap = $(`<div data-type="export"></div>`);
                $("#toolbar").find(".part2").append(wrap);
                wrap.append(`<button type="button" class="ag-button-primary" style="margin-right: 30px;">新建思维导图</button>`);
                wrap.append(`<button type="button" class="ag-button-primary">导入数据</button>`);
                wrap.append(`<button type="button" class="ag-button-primary">清空数据</button>`);
                wrap.append(`<button type="button" class="ag-button-primary">导出为图像数据</button>`);
                wrap.append(`<button type="button" class="ag-button-primary">导出为json数据</button>`);
                wrap.append(`<button type="button" class="ag-button-primary">导出为txt数据</button>`);
                wrap.append(`<button type="button" class="ag-button-primary">导出为md数据</button>`);
            } else if (text == "数据操作") {
                $("#txtContent").html(json_examples2);
                $("#toolbar").find(".part1").append(`<button type="button" class="ag-button">json示例2</button>`);
                $("#toolbar").find(".part1").append(`<button type="button" class="ag-button">清除</button>`);
                let wrap = $(`<div data-type="data"></div>`);
                $("#toolbar").find(".part2").append(wrap);
                wrap.append(`<button type="button" class="ag-button-primary">装载数据</button>`);
                wrap.append(`<button type="button" class="ag-button-primary">清空数据</button>`);
                wrap.append(`<button type="button" class="ag-button-primary" style="margin-right: 30px;">获取数据</button>`);
                wrap.append(`<button type="button" class="ag-button-primary">获取选中主题数据</button>`);
                wrap.append(`<button type="button" class="ag-button-primary" style="margin-right: 30px;">居中主题</button>`);
                wrap.append(`<button type="button" class="ag-button-primary" style="margin-right: 30px;">获取文档修改状态</button>`);
            } else if (text == "主题操作") {
                let wrap = $(`<div data-type="topic"></div>`);
                $("#toolbar").find(".part2").append(wrap);
                wrap.append(`<button type="button" class="ag-button-primary">增加子主题</button>`);
                wrap.append(`<button type="button" class="ag-button-primary">增加父主题</button>`);
                wrap.append(`<button type="button" class="ag-button-primary">增加同级主题(弟)</button>`);
                wrap.append(`<button type="button" class="ag-button-primary" style="margin-right: 30px;">增加同级主题(兄)</button>`);
                wrap.append(`<button type="button" class="ag-button-primary" style="margin-right: 15px;">删除主题</button>`);
                wrap.append(`<button type="button" class="ag-button-primary">展开</button>`);
                wrap.append(`<button type="button" class="ag-button-primary" style="margin-right: 30px;">折叠</button>`);
                wrap.append(`<button type="button" class="ag-button-primary" style="margin-right: 30px;">增加主题链接</button>`);
            } else if (text == "图形布局") {
                let wrap = $(`<div data-type="layout"></div>`);
                $("#toolbar").find(".part2").append(wrap);
                wrap.append(`<button type="button" class="ag-button-primary">逻辑图+向右</button>`);
                wrap.append(`<button type="button" class="ag-button-primary" style="margin-right: 30px;">逻辑图+向左</button>`);
                wrap.append(`<button type="button" class="ag-button-primary">树状+右下</button>`);
                wrap.append(`<button type="button" class="ag-button-primary" style="margin-right: 30px;">树状+左下</button>`);
                wrap.append(`<button type="button" class="ag-button-primary">时间线+向右</button>`);
                wrap.append(`<button type="button" class="ag-button-primary" style="margin-right: 30px;">时间线+向下</button>`);
                wrap.append(`<button type="button" class="ag-button-primary">树型表格</button>`);
                wrap.append(`<button type="button" class="ag-button-primary" style="margin-right: 30px;">树型矩阵</button>`);
                wrap.append(`<button type="button" class="ag-button-primary">居中显示</button>`);
            } else if (text == "风格样式") {
                let wrap = $(`<div data-type="theme"></div>`);
                $("#toolbar").find(".part2").append(wrap);
                wrap.append(`<button type="button" class="ag-button-primary">风格: 经典</button>`);
                wrap.append(`<button type="button" class="ag-button-primary">风格: 流行</button>`);
                wrap.append(`<button type="button" class="ag-button-primary">风格: 梦幻</button>`);
                wrap.append(`<button type="button" class="ag-button-primary">风格: 活力</button>`);
                wrap.append(`<button type="button" class="ag-button-primary">风格: 复古</button>`);
                wrap.append(`<button type="button" class="ag-button-primary">风格: 正式</button>`);
                wrap.append(`<button type="button" class="ag-button-primary">风格: 深沉</button>`);
                wrap.append(`<button type="button" class="ag-button-primary">风格: 淡雅</button>`);
            } else if (text == "界面控制") {
                let wrap = $(`<div data-type="face"></div>`);
                $("#toolbar").find(".part2").append(wrap);
                wrap.append(`<label><input type="checkbox" data-tag="headerArea" />Header面板</label>`);
                wrap.append(`<label><input type="checkbox" data-tag="dataPanel" />数据面板</label>`);
                wrap.append(`<label style="margin-right: 40px;"><input type="checkbox" data-tag="morePanel" />更多面板</label>`);
                wrap.append(`<label><input type="checkbox" data-tag="fileMenu" />文件菜单</label>`);
                wrap.append(`<label><input type="checkbox" data-tag="fileToolbar" />文件工具栏</label>`);
                wrap.append(`<label><input type="checkbox" data-tag="fileSaveStatus" />文件保存状态</label>`);
                wrap.append(`<label><input type="checkbox" data-tag="topicToolbar" />主题工具栏</label>`);
                wrap.append(`<label><input type="checkbox" data-tag="searchToolbar" />搜索工具栏</label>`);
                wrap.append(`<label><input type="checkbox" data-tag="leftStatusbar" />左侧状态栏</label>`);
                wrap.append(`<label><input type="checkbox" data-tag="rightStatusbar" />右侧状态栏</label>`);
                wrap.append(`<button type="button" class="ag-button-primary">显示</button>`);
                wrap.append(`<button type="button" class="ag-button-primary">隐藏</button>`);
            } else if (text == "子图") {
                $("#txtContent").html(subgraph_examples);
                let wrap = $(`<div data-type="subgraph"></div>`);
                $("#toolbar").find(".part2").append(wrap);
                wrap.append(`<button type="button" class="ag-button-primary">插入子图</button>`);
                wrap.append(`<button type="button" class="ag-button-primary" style="margin-left: 30px;">缓存子图数据</button>`);
                wrap.append(`<button type="button" class="ag-button-primary">引用子图</button>`);
            } else {
                $("#container").html("");
                init();
            }
            bindEvent();
        });

        // 设置初始功能项
        $("#fun-list li:nth-child(2)").click();
    });

    // 绑定button事件
    function bindEvent() {

        // 显示示例数据
        $("#toolbar").find(".part1").find("button").on("click", function () {
            let text = $(this).text();
            if (text === "json示例1") {
                $("#txtContent").html(json_examples1);
            } else if (text === "json示例2") {
                $("#txtContent").html(json_examples2);
            } else if (text === "md示例") {
                $("#txtContent").html(md_examples2);
            } else if (text === "txt示例") {
                $("#txtContent").html(txt_examples);
            } else if (text === "清除") {
                $("#txtContent").html("");
                $("#txtResult").html("");
            }
        });

        // 接口调用示例
        $("#toolbar").find(".part2").find("button").on("click", function () {
            let type = $(this).parent().attr("data-type");
            if (type === "export") {
                doExportData(this);
            } else if (type === "data") {
                doDataManager(this);
            } else if (type === "topic") {
                doTopicManager(this);
            } else if (type === "theme") {
                doSetTheme(this);
            } else if (type === "layout") {
                doSetLayout(this);
            } else if(type === "face") {
                doSetFace(this);
            } else if(type === "subgraph") {
                doSubgraph(this);
            }
        });
    }

</script>

</html>